<template>
  <el-input
    v-model="data"
    placeholder="aaa"
    :autosize="{ minRows: 1, maxRows: 8 }"
    :type="type"
    class="visual_input"
    @blur="away"
  />
</template>

<script setup>
  import { ref, computed, onMounted } from 'vue'
  const props = defineProps({
    data: {
      type: [String, Object],
      required: true
    }
  })
  const emit = defineEmits(['update:modelValue','change'])
  let type = ref('')
  let data = ref('')
  onMounted(()=> {
    data.value = props.data

    let data2 = data.toString()

    if(data2.startsWith('#')){
      type.value = 'color'
    }else {
      type.value = isNumber(data) ? 'number' : 'textarea'
    }
  

  })
  function isNumber(val){
    var regPos =  /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/ //判断是否全是数字。
  
    if (regPos.test(val) ) {
      return true
    } else {
      return false
    }
  }
  const away = () => {
    console.log(data.value)
    if(isNumber(data.value)){
      emit('change', parseInt(data.value))
    }else{
      emit('change', data.value)
    }
      emit('update:modelValue', data.value)
    
  }
</script>

<style lang="less" scoped>
.visual_input {
  :deep(.el-input__inner) {
    min-width: 40px;
  }
}

</style>
